// 等待DOM加载完成后执行
document.addEventListener('DOMContentLoaded', () => {


    // 获取DOM元素
    const recipesContainer = document.querySelector('.recipes');
    const categoryFilters = document.querySelectorAll('input[name="category"]');
    const timeFilters = document.querySelectorAll('input[name="time"]');
    const difficultyFilters = document.querySelectorAll('input[name="difficulty"]');
    const searchInput = document.getElementById('header-search');
    const userIcon = document.querySelector('.user-icon-img');
    const loginList = document.querySelector('.Loginlist');

    // 渲染菜谱卡片
    function renderRecipes(filteredRecipes) {
        recipesContainer.innerHTML = '';
        filteredRecipes.forEach(recipe => {
            const recipeCard = document.createElement('div');
            recipeCard.className = 'recipe-card';
            recipeCard.innerHTML = `
                <img src="${recipe.image}" alt="${recipe.title}" onerror="this.style.display='none'">
                <div class="recipe-card-content">
                    <h3>${recipe.title}</h3>
                    <div class="recipe-card-meta">
                        <span>${recipe.category}</span>
                        <span>${recipe.time}</span>
                        <span>${recipe.difficulty}</span>
                    </div>
                </div>
            `;
            recipeCard.addEventListener('click', function() {
                // 跳转到菜谱类型的详情页面，并传递菜谱类型ID
                window.location.href = `Recipe?recipe_name=${recipe.title}&recipe_id=${recipe.id}`;
            });
            recipesContainer.appendChild(recipeCard);
        });
    }

    // 筛选菜谱
    function filterRecipes() {
        const categoryValue = document.querySelector('input[name="category"]:checked').value;
        const timeValue = document.querySelector('input[name="time"]:checked').value;
        const difficultyValue = document.querySelector('input[name="difficulty"]:checked').value;
        // const searchValue = searchInput.value.toLowerCase();

        const filteredRecipes = recipes.filter(recipe => {
            const matchesCategory = categoryValue === 'all' || recipe.category === categoryValue;
            const matchesTime = timeValue === 'all' || parseInt(recipe.time) <= parseInt(timeValue);
            const matchesDifficulty = difficultyValue === 'all' || recipe.difficulty === difficultyValue;
            // const matchesSearch = recipe.title.toLowerCase().includes(searchValue) ||
            //     recipe.category.toLowerCase().includes(searchValue);

            return matchesCategory && matchesTime && matchesDifficulty;
                // && matchesSearch;
        });

        renderRecipes(filteredRecipes);
    }

    // 添加事件监听器
    categoryFilters.forEach(filter => filter.addEventListener('change', filterRecipes));
    timeFilters.forEach(filter => filter.addEventListener('change', filterRecipes));
    difficultyFilters.forEach(filter => filter.addEventListener('change', filterRecipes));
    searchInput.addEventListener('input', filterRecipes);

    // 初始渲染
    renderRecipes(recipes);
});